<template>
  <div class="article-wrap curr-main">
    <!-- <div class="search-header">
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="标签名称">
          <el-input v-model="form.name" size="small"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="small" @click="onSubmit">查询</el-button>
          <el-button size="small">重置</el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="content-table">
      <div class="content-header">
        <h3>用户列表</h3>
        <div class="header-right">
          <el-button type="primary" size="small" @click.prevent="addTag()">
            新增</el-button>
        </div>
      </div>
      <el-table :data="state.tableData" style="width: 100%" border>
        <el-table-column label="序号" type="index" width="55" align="center" />
        <el-table-column prop="username" label="用户名" align="center" />
        <!-- <el-table-column prop="password" label="密码" align="center" /> -->
        <el-table-column label="操作" align="center" width="500">
          <template #default="scope">
            <el-button type="text" size="small" :disabled="scope.row.username==='admin'" @click.prevent="grant(scope.row)">
              分配权限
            </el-button>
            <el-button type="text" size="small" @click.prevent="editPassword(scope.row)">
              修改密码
            </el-button>
            <el-button type="text" size="small" :disabled="scope.row.username==='admin'" @click.prevent="deleteUsers(scope.row.id)">
              删除用户
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :currentPage="form.pageNum" :page-sizes="[10, 20, 30, 40, 50]" :page-size="form.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination>
      <add-user-dialog ref="addUserRef" @updateUserList="updateUserList"></add-user-dialog>
      <edit-password-dialog ref="editPasswordRef" @updateUserList="updateUserList"></edit-password-dialog>
      <user-limit-dialog ref="userLimitRef"></user-limit-dialog>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, onBeforeMount } from 'vue'
import { getUserList, deleteUser } from '@/api/user'
import editPasswordDialog from './components/editPassword.vue'
import addUserDialog from './components/addUser.vue'
import userLimitDialog from './components/userLimit.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
interface form {
  pageNum: number
  pageSize: number
}
export default defineComponent({
  name: 'ManagementUser',
  components: { editPasswordDialog, addUserDialog,userLimitDialog },
  setup() {
    // let tableData = reactive<Array<any>>([]);
    //定义表格
    const state = reactive({
      tableData: <Array<any>>[],
    })
    const total = ref(0) //总条数
    const addUserRef = ref('addUserRef') //新增表单实列
    const editPasswordRef = ref('editPasswordRef') //修改表单实列
    const userLimitRef = ref('userLimitRef') //权限表单实列
    //分页参数
    const form = reactive<form>({
      pageNum: 1,
      pageSize: 10,
    })
    onBeforeMount(() => {
      init()
    })
    //初始化列表
    const init = async () => {
      const { data: res } = await getUserList(form)
      state.tableData = res.data.result
      total.value = res.data.total
      console.log(state)
    }
    //切换分页
    const handleSizeChange = (val: number) => {
      form.pageSize = val
      init()
    }
    const handleCurrentChange = (val: number) => {
      form.pageNum = val
      init()
    }
    //删除用户
    const deleteUsers = (id: string) => {
      ElMessageBox.confirm('确定要删除该用户?', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const res = await deleteUser({ id: id })
          console.log(res)
          if (res.data.code !== 200) {
            ElMessage({
              type: 'error',
              message: '删除失败',
            })
            return
          }
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          init()
        })
        .catch(() => {})
    }
    //新增用户
    const addTag = () => {
      const addUserRefValue: any = addUserRef.value
      addUserRefValue.open()
    }
    //更新列表
    const updateUserList = () => {
      init()
    }
    //分配权限
    const grant = (row: any) => {
      const userLimitRefValue: any = userLimitRef.value
      userLimitRefValue.open(row)
    }
    //修改密码
    const editPassword = async (row: any) => {
      const editPasswordRefValue: any = editPasswordRef.value
      editPasswordRefValue.open(row)
    }
    return {
      state,
      form,
      total,
      handleSizeChange,
      handleCurrentChange,
      addTag,
      init,
      addUserRef,
      editPasswordRef,
      updateUserList,
      grant,
      editPassword,
      deleteUsers,
      userLimitRef
    }
  },
})
</script>

<style lang="scss" scoped>
.article-wrap {
  height: 100%;
}
.el-form {
  display: flex;
  flex-wrap: wrap;
}
.search-header {
  background: #fff;
  margin-bottom: 15px;
  padding-top: 22px;
  border-radius: 4px;
}
.content-table {
  background: #fff;
  border-radius: 4px;
  padding: 10px 15px;
}
.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 0 10px;
}
</style>